<script setup lang="ts">
import { ref, computed, shallowRef, onMounted, onBeforeUnmount } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useAdminHooks } from "@/views/common/admin";
import { useUserStore } from "@/store/modules/user";
const { adminList, isSuperAdmin, currentUsername } = useAdminHooks();
const userStore = useUserStore();
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { uploadImageConfig } from "@/views/common/upload_background";

import { classifyFormat } from "@/views/formats";
const { classifyMenuOptions: typesMenuOptions } = classifyFormat("classify");

const { classifyMenuOptions: businessMenuOptions } = classifyFormat("business");

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: ""
  })
});

const ruleFormRef = ref();

const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
const { uploadUrl } = uploadImageConfig(newFormInline, {
  field: "text",
  isSingle: false,
  maxSize: 10,
  maxCount: 10
});

// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
editorConfig.MENU_CONF["uploadImage"] = {
  // 服务端上传地址，根据实际业务改写
  server: uploadUrl,
  // form-data 的 fieldName，根据实际业务改写
  fieldName: "file",
  maxFileSize: 10 * 1024 * 1024, // 10M
  // 选择文件时的类型限制，根据实际业务改写
  allowedFileTypes: ["image/*", "image/jpg", "image/jpeg", "image/webp"],
  // 自定义插入图片
  customInsert(res: any, insertFn) {
    // res.data.url是后端返回的图片地址，根据实际业务改写
    if (res.image_url) {
      setTimeout(() => {
        // insertFn插入图片进编辑器
        insertFn(res.image_url);
      }, 2000);
    }
  }
};

const handleCreated = editor => {
  // 记录 editor 实例，重要！
  editorRef.value = editor;
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const mode = ref("default");

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <re-col>
      <el-form-item label="类型分类">
        <el-cascader
          v-model="newFormInline.type_classify_id"
          class="w-full"
          :options="typesMenuOptions"
          :props="{
            value: 'id',
            label: 'title',
            emitPath: false,
            checkStrictly: true
          }"
          clearable
          filterable
          placeholder="请选择类型分类"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </re-col>

    <re-col>
      <el-form-item label="业务分类">
        <el-cascader
          v-model="newFormInline.business_classify_id"
          class="w-full"
          :options="businessMenuOptions"
          :props="{
            value: 'id',
            label: 'title',
            emitPath: false,
            checkStrictly: true
          }"
          clearable
          filterable
          placeholder="请选择业务分类"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
    </re-col>

    <el-form-item label="标题" prop="title">
      <el-input v-model="newFormInline.title" clearable />
    </el-form-item>
    <el-form-item label="seo描述" prop="seo_desc">
      <el-input v-model="newFormInline.seo_desc" clearable />
    </el-form-item>
    <el-form-item label="seo关键词" prop="seo_keyword">
      <el-input v-model="newFormInline.seo_keyword" clearable />
    </el-form-item>
    <el-form-item label="简介" prop="content">
      <el-input v-model="newFormInline.content" type="textarea" clearable />
    </el-form-item>
    <el-form-item label="正文" prop="text">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        v-model="newFormInline.text"
        :defaultConfig="editorConfig"
        :mode="mode"
        style="height: auto; width: 100%; overflow-y: hidden"
        @onCreated="handleCreated"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped>
:deep(.el-slider__runway) {
  background-color: #e9ecef;
}
:deep(.el-slider__bar) {
  background-color: #409eff;
}
:deep(.el-slider__stop) {
  background-color: #e9ecef;
}
</style>
